import React from 'react';
import { withRouter } from 'react-router-dom';
import '../../mysite.scss'
import style from '../../mysite.module.scss';
import Title from '@/components/mysite/title';
import Version from './version'
import Gridcard from './gridcard'
import { Row, Col, Tabs, Table, Card } from 'antd';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import theme from '@/components/echarts/theme'
const { TabPane } = Tabs;
const { Meta } = Card;

const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '3',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '4',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  }
];

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
  },
];
class Home extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      chartWidth: 0
    }
  }

  callback(key) {
    console.log(key);
  }

  componentDidMount() {
    let el = document.getElementById('chart');
    let myChart = echarts.init(el, theme);

    myChart.setOption({
      title: { text: '统计数据', textStyle: { color: '#095D90' } },
      tooltip: {},
      xAxis: {
        data: ["1月", "2月", "3月", "4月", "5月", "6月"]
      },
      yAxis: {},
      series: [{
        name: '注册数量',
        type: 'line',
        smooth: true,
        data: [5, 20, 36, 10, 10, 20],
        areaStyle: {}
      }, {
        name: '下载数量',
        type: 'line',
        smooth: true,
        data: [25, 10, 16, 50, 40, 10],
        areaStyle: {}
      }]
    });
    //手动解决自适应栅格宽度
    myChart.on('finished', function () {
      myChart.resize();
    });
  }

  render() {
    return (
      <div className='content_box'>
        <Row gutter={[10, 10]}>
          <Col xs={24} sm={24} md={16}>
            <div className="bgwhite cell_box">
              <div id="chart" className={style.chart}></div>
            </div>
            <div className="bgwhite cell_box mgtop15">
              <Tabs defaultActiveKey="1" onChange={this.callback}>
                <TabPane tab="下载排行榜" key="1">
                  <Table dataSource={dataSource} columns={columns} />
                </TabPane>
                <TabPane tab="应用列表" key="2">
                  <Table dataSource={dataSource} columns={columns} />
                </TabPane>
              </Tabs>
            </div>
          </Col>
          <Col xs={24} sm={24} md={8}>
            <div className="bgwhite cell_box">
              <Title title="版本信息" />
              <Version></Version>
            </div>
            <div className="bgwhite cell_box mgtop15">
              <Title title="快捷方式" />
              <Gridcard></Gridcard>
            </div>
            <div className="bgwhite cell_box mgtop15">
              <Title title="我的卡片" />
              <Card
                hoverable
                style={{ width: '50%', margin: '0 auto' }}
                cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
              >
                <Meta title="热锅上的蚂蚁" description="www.justinzyh.com" />
              </Card>
            </div>
          </Col>
        </Row>
      </div>
    )
  }
}

export default withRouter(Home)
